<template>
	<view style="margin-bottom: 10px;margin-left: 5px;">
		<view class="flex son_com" style="margin-bottom: 7px;">
			<view class="cu-avatar round avator" style="margin-right: 10px;width:5vw;height: 5vw;"
				:style="{ 'background-image': 'url(' + avatar + ')' }">
			</view>
			<view style="color: black;font-weight: 700;font-size: x-small;">{{name}}:</view>
			<!-- 			<view class="commit_which" style="margin-left: 3vw;font-size: xx-small;color: gray;">
				
			</view> -->
		</view>
		<view class="flex-sub" style="text-align: start;font-size: 0.8rem;">
			&nbsp;{{content}}</view>
		<view class="commit_son">

			<view class="text-gray text-df" style="font-size: xx-small;">{{time.substring(0,10)}}</view>
			<text style="color: red;font-size: xx-small;margin-left: 5px;" v-if="createid==myid" @click="DelateCom(id)">删除</text>
			<view @click='backComment(id,createid)'>
				<!-- <text class="cuIcon-appreciatefill text-red"></text> -->
				<text class="cuIcon-messagefill text-gray margin-left-sm"
					style="font-size: xx-small;margin-right: 5vw;"></text>
			</view>
		</view>
		<view class="son_son_comtent" v-for="(item,index) in comment_list" :key="index">
			<view class="flex son_com" style="margin-bottom: 7px;">
				<view class="cu-avatar round avator" style="margin-right: 10px;width:5vw;height: 5vw;"
					:style="{ 'background-image': 'url(' + item.avatar + ')' }">
				</view>
				<view style="color: black;font-weight: 700;font-size: x-small;">{{item.name}}</view>
				<view class="commit_which" style="margin-left: 3vw;font-size: xx-small;color: gray;">
					<text style="font-weight: 700;">回复：</text>{{item.commentName}}
				</view>
			</view>
			<view class="flex-sub" style="text-align: start;font-size: 0.8rem;">
				{{item.content}}</view>
			<view class="commit_son">
				<view class="text-gray text-df" style="font-size: xx-small;">{{item.time}}</view>
				<text style="color: red;font-size: xx-small;margin-left: 5px;" v-if="item.userid==myid" @click="DelateCom(item.id)">删除</text>
				<view @click='backComment(item.id,item.userid)'>
					<!-- <text class="cuIcon-appreciatefill text-red"></text> -->
					<text class="cuIcon-messagefill text-gray margin-left-sm"
						style="font-size: xx-small;margin-right: 5vw;"></text>
				</view>
			</view>
		</view>
		<view class="comment_son_more" v-if="more">
			<view style="font-size: xx-small;" @click="getmore">
				---展开剩余{{total-comment_list.length}}条回复
			</view>
			<text class="cuIcon-unfold" style="font-size: xx-small;"></text>
		</view>
	</view>

</template>

<script>
	import {
		getSoncommonents,
		deleteMycomment
	} from '@/store/api.js'
	export default {
		props: ['avatar', 'name', 'content', 'time', 'id', 'type', 'createid'],
		mounted() {
			this.myid=uni.getStorageSync('userid')
			uni.$on('sendFinish',value=>{
				if(this.id==value){
					if(this.more==false){
						getSoncommonents(this.id, this.comment_list.length+1,1).then(res => {
							// this.comment_list=[]
							console.log(res.data.data.rows)
							if (res.data.data.total == 0) {
								this.more = false
							}
							this.total = res.data.data.total
							res.data.data.rows.forEach(item => {
								this.comment_list.push({
									id: item.id,
									userid: item.createBy,
									time: item.createTime.substring(0, 10),
									content: item.content,
									avatar: item.avatar,
									name: item.username,
									commentName: item.toCommentUserName
								})
							})
							if (this.comment_list.length >= this.total) {
								this.more = false
							}
						}).catch(err => {
							console.log(err)
						})
					}
				}
			}),
			getSoncommonents(this.id, this.nowpage, 3).then(res => {
				// console.log('这是获取评论的')
				console.log(res.data.data.rows)
				if (res.data.data.total == 0) {
					this.more = false
				}
				this.total = res.data.data.total
				this.nowpage++
				res.data.data.rows.forEach(item => {
					this.comment_list.push({
						id: item.id,
						userid: item.createBy,
						time: item.createTime.substring(0, 10),
						content: item.content,
						avatar: item.avatar,
						name: item.username,
						commentName: item.toCommentUserName
					})
				})
				if (this.comment_list.length >= this.total) {
					this.more = false
				}
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				myid:'',
				total: 0,
				nowpage: 1,
				more: true,
				showDialog: true,
				comment_list: []
			}
		},
		methods: {
			DelateCom(id){
				deleteMycomment(id)
			},
			getmore() {
				getSoncommonents(this.id, this.nowpage, 3).then(res => {
					// console.log('这是获取评论的')
					console.log(res.data.data.rows)
					this.total=res.data.data.total
					this.nowpage++
					res.data.data.rows.forEach(item => {
						this.comment_list.push({
							id: item.id,
							userid: item.createBy,
							time: item.createTime.substring(0, 10),
							content: item.content,
							avatar: item.avatar,
							name: item.username,
							commentName: item.toCommentUserName
						})
					})
					if (this.comment_list.length >= this.total) {
						this.more = false
					}
				}).catch(err => {
					console.log(err)
				})
			},
			backComment(id, userid) {
				if (this.type == 0) {
					console.log(this.type)
					uni.$emit('CommentOne', {
						id: id,
						userid: userid
					})
				} else {
					console.log(this.type)
					uni.$emit('CommentAll', {
						rootid: this.id,
						id: id,
						userid: userid
					})
				}
			}
		}
	}
</script>

<style scoped>
	.son_son_comtent {
		margin-left: 5vw;
	}

	.comment_son_more {
		display: flex;
		margin-left: 5vw;
		vertical-align: middle;
	}

	.commit_son {
		display: flex;
		width: 100%;
		height: 3vh;
		line-height: 3vh;
		justify-content: flex-end;
		font-size: xx-small;

	}

	.more {
		width: 100%;
		text-align: center;
		height: 5vh;
		line-height: 5vh;
		font-size: small;
		font-weight: 700;
		/* background-color: black; */
	}

	.son_com {
		align-items: center;

	}
</style>